<!--
 * @Author: zhouzhiwei zzwchilong@163.com
 * @Date: 2025-05-06 00:34:57
 * @LastEditors: zhouzhiwei zzwchilong@163.com
 * @LastEditTime: 2025-06-11 00:09:43
 * @FilePath: \steel-cloud-static\static\asset\html\home.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<meta charset="UTF-8" />
<div class="homePage">
  <div class="homePageContent">
    <!-- <div class="contentTitle">基础信息</div> -->
    <!-- <div class="flex">
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title"></div>
        <div class="flex-1" id="quanyi"></div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title">检测目标情况</div>
        <div class="flex-1"></div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col">
        <div class="title">检测目标情况</div>
        <div class="flex-1"></div>
      </div>
    </div> -->
    <div class="flex">
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <span class="titleText">Mr Liu,您好！</span>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="markList">
          <span class="comMark greenLight">总管理员</span>
        </div>
        <div class="infoList">
          <div class="flex items-center">
            <div class="name">登陆账户</div>
            <div class="flex-1">LuhuangZhang</div>
          </div>
          <div class="flex items-center">
            <div class="name">手机号</div>
            <div class="flex-1 flex items-center phone">
              <span>151******124</span>
              <span class="iconfont icon-yanjing1"></span>
            </div>
          </div>
          <div class="flex items-center">
            <div class="name">所属公司</div>
            <div class="flex-1">XXXXXXXXXXXXXXXXX</div>
          </div>
          <div class="flex items-center">
            <div class="name">上次登录</div>
            <div class="flex-1">2025-05-04 12:12:12</div>
          </div>
        </div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon purple">
              <span class="iconfont icon-jieshourenwu"></span>
            </div>
            <span class="titleText">接受任务</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="flex taskList wrap">
          <div class="flex-1">
            <div>进行中任务</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>已完成任务</div>
            <div class="number">88888</div>
          </div>
          <div class="flex-1">
            <div>进行中任务</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>已完成任务</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon pink">
              <span class="iconfont icon-xiafarenwu"></span>
            </div>
            <span class="titleText">下发任务</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="flex taskList wrap">
          <div class="flex-1">
            <div>待启动任务</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>进行中任务</div>
            <div class="number">88888</div>
          </div>
          <div class="flex-1">
            <div>待审核任务</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>已完成任务</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex m-t-15">
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon green">
              <span class="iconfont icon-yingjianshebei"></span>
            </div>
            <span class="titleText">硬件设备</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="flex taskList wrap">
          <div class="flex-1">
            <div>计算机</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>服务器</div>
            <div class="number">88888</div>
          </div>
          <div class="flex-1">
            <div>安全设备</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>网络设备</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon blue">
              <span class="iconfont icon-jieshourenwu"></span>
            </div>
            <span class="titleText">IP地址</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="flex taskList wrap">
          <div class="flex-1">
            <div>IPV4地数</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>IPV6地址数</div>
            <div class="number">88888</div>
          </div>
          <div class="flex-1">
            <div>互联网地址</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>上云数</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon purpleblue">
              <span
                class="iconfont icon-tongyonghangkongzuoyeguanlixitongICON-"
              ></span>
            </div>
            <span class="titleText">业务系统</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="flex taskList wrap">
          <div class="flex-1">
            <div>公众服务系统</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>业务信息系统</div>
            <div class="number">88888</div>
          </div>
          <div class="flex-1">
            <div>办公管理系统</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>网站</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
      <div class="comModal height240 w360 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon purpledark">
              <span class="iconfont icon-yidongyingyong"></span>
            </div>
            <span class="titleText">移动应用</span>
          </div>
        </div>
        <div class="flex flex-col taskList wrap">
          <div class="flex-1">
            <div>IOS</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>已备案</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
      <div class="comModal height240 w360 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon purpledark">
              <span class="iconfont icon-xiaochengxu"></span>
            </div>
            <span class="titleText">小程序</span>
          </div>
        </div>
        <div class="flex flex-col taskList wrap">
          <div class="flex-1">
            <div>数量</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>已备案</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex m-t-15">
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon orange">
              <span class="iconfont icon-shouli"></span>
            </div>
            <span class="titleText">受理工单</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="flex taskList wrap">
          <div class="flex-1">
            <div>待受理</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>处理中</div>
            <div class="number">88888</div>
          </div>
          <div class="flex-1">
            <div>已驳回</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>已完成</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <div class="titleIcon yellow">
              <span class="iconfont icon-shouli"></span>
            </div>
            <span class="titleText">提交的工单</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="flex taskList wrap">
          <div class="flex-1">
            <div>待受理</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>处理中</div>
            <div class="number">88888</div>
          </div>
          <div class="flex-1">
            <div>待确认</div>
            <div class="number">10001</div>
          </div>
          <div class="flex-1">
            <div>被驳回</div>
            <div class="number">88888</div>
          </div>
        </div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <span class="titleText">最新通知</span>
          </div>
          <div class="titleMore">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <div class="noticeList">
          <div class="listItem flex">
            <div class="comMark red">任务</div>
            <div class="flex-1">
              <div class="ellipsis">任务具体内容，超出省略号表示</div>
              <div class="time">2021-01-01 12:00:00</div>
            </div>
          </div>
          <div class="listItem flex">
            <div class="comMark greenLight">工单</div>
            <div class="flex-1">
              <div class="ellipsis">任务具体内容，超出省略号表示</div>
              <div class="time">2021-01-01 12:00:00</div>
            </div>
          </div>
          <div class="listItem flex">
            <div class="comMark blue">系统</div>
            <div class="flex-1">
              <div class="ellipsis">任务具体内容，超出省略号表示</div>
              <div class="time">2021-01-01 12:00:00</div>
            </div>
          </div>
          <div class="listItem flex">
            <div class="comMark red">任务</div>
            <div class="flex-1">
              <div class="ellipsis">任务具体内容，超出省略号表示</div>
              <div class="time">2021-01-01 12:00:00</div>
            </div>
          </div>
        </div>
      </div>
      <div class="comModal flex-1 height240 flex flex-col m-r-15">
        <div class="title flex justify-between">
          <div class="flex items-center">
            <span class="titleText">常用工具</span>
          </div>
        </div>
        <div class="toolList">
          <div class="listItem flex">
            <div class="iconBox url">
              <span class="iconfont icon-URLguanli"></span>
            </div>
            <div class="flex-1">格式化地址</div>
          </div>
          <div class="listItem flex">
            <div class="iconBox IP">
              <span class="iconfont icon-ip"></span>
            </div>
            <div class="flex-1">IP格式化</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    // initChart();
  });
  function initChart() {
    var chartDom = document.getElementById("quanyi");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        right: "20%",
        top: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["60%", "70%"],
          avoidLabelOverlap: false,
          center: ["20%", "50%"],
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: true,
            position: "center",
          },
          emphasis: {
            label: {
              show: false,
            },
            type: "scroll",
            orient: "vertical",
            right: 10,
            top: 20,
            bottom: 20,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "网站" },
            { value: 735, name: "微信" },
            { value: 580, name: "微博" },
            { value: 484, name: "头条" },
            { value: 300, name: "APP" },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
  }
</script>
